<!--
 * @Description: 
 * @Version: 0.0
 * @Author: taosong
 * @Date: 2023-03-26 16:56:21
 * @LastEditors: taosong
 * @LastEditTime: 2023-03-26 21:38:48
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>绘制一个点</title>
    <script src="../libs/index.js"></script>
  </head>
  <body>
    <canvas id="canvas"> 此浏览器不支持canvas </canvas>

    <script>
      /** @type {HTMLCanvasElement} */
      const ctx = document.getElementById('canvas')

      const gl = ctx.getContext('webgl')

      // 着色器
      // 创建着色器源码

      // 顶点着色器
      const VERTEX_SHADER_SOURCE = `
        // 必须要存在的main函数
        void main() {
          // 点的位置
          gl_Position = vec4(0.0,0.0, 0.0, 1.0);
          // 点的大小
          gl_PointSize = 30.0;
        }
      `
      // gl_Position 的vec4(0.0, 0.0, 0.0, 1.0) 是(x, y, z, w) w是 齐次坐标 相当于(x/w, y/w, z/w)
      // gl_FragColor 的vec4(1.0, 0.0, 0.0, 1.0) 是 rgba r: red g:green b:blue a: alpha

      // 片元着色器
      const FRAGMENT_SHADER_SOURCE = `
        void main() {
          // 点的颜色
          gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
      `

      initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

      // 执行绘制
      // 1要绘制的是什么 从哪个开始  使用几个顶点
      gl.drawArrays(gl.POINTS, 0, 1)

      // 3个顶点
      // 0.0 0.0 0.0
      // 0.2 0.0 0.0
      // 0.4 0.0 0.0
      // gl.drawArrays(gl.POINTS, 0, 1)
      // gl.drawArrays(gl.LINES, 1, 2)
    </script>
  </body>
</html>
